<!--
 * @FileDescription 外部链接
 * @Author lz
 * @Date 20230807 13:59:05
 * @LastEditors lz
 * @LastEditTime 20230807 13:59:05
-->
<template>
    <div class="iframe_wp">
        <div class="content_wp">
            <img src="/images/Benz600/ic_close.png" class="hi_close" @click="close">
            <!-- <iframe src="https://html5test.com/" class="ifra" scrolling="auto"></iframe> -->
            <iframe :src="HomeContent.Default.VideoAddress.value" class="ifra" allow="autoplay" scrolling="auto"></iframe>
            <!-- <videoPlay ref="aplayVideo" v-bind="options" @play="onPlay" /> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import HomeContent from '../HomeContent';
import { ref, reactive } from "vue";
// 视频播放组件
import "vue3-video-play/dist/style.css";
//@ts-ignore
import { videoPlay } from "vue3-video-play";
//事件示例
const onPlay = () => {
    console.log("播放");
};

//播放器
const options = reactive({
    width: '100%', //播放器高度
    height: '100%', //播放器高度
    color: "#409eff", //主题色
    title: "", //视频名称
    webFullScreen: false,//网页全屏
    speed: true,//是否支持快进快退
    currentTime: 0,//跳转到固定播放时间(s)
    muted: false,//静音
    autoPlay: true, //自动播放
    loop: false,//循环播放
    mirror: false,//镜像画面
    control: true, //是否显示控制器
    ligthOff: false,//关灯模式
    volume: 0.3,//默认音量0-1
    src: 'https://file.zhijiaobf.cn/file_2/20230707/20230707034439PmxmBf4495.mp4', //视频源
    poster: '', //封面
    speedRate: [1.0, 1.25, 1.5, 2.0], // 可选的播放速度
    controlBtns: [
        "audioTrack",//音轨切换按钮
        "quality",//视频质量切换按钮
        "speedRate",//速率切换按钮
        "volume",//音量
        "setting",//设置
        "pip",//画中画按钮
        "pageFullScreen",//网页全屏按钮
        "fullScreen",//全屏按钮
    ], //显示所有按钮,
})
function close() {
    //关闭
    HomeContent.Default.VideoBox.value = false
}
</script>

<style scoped>
.iframe_wp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.content_wp {
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.ifra {
    width: 100%;
    height: 100%;
    transform: scale(1.01) !important;
}

.hi_close {
    width: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all 0.2s linear;
    z-index: 999;
}

.hi_close:hover {
    transform: rotate(180deg);
    transition: all 0.2s linear;
}
</style>